<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-13 16:55:15
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 14:36:12
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="peopleInfo">
    <action-bar :options="navOptions" />
    <view class="main">
      <!-- 基本信息 -->

      <uni-section title="基本信息" type="line">
        <view class="formItem">
          <view class="label">姓名</view>
          <input class="content" placeholder="请输入姓名" v-model="form.name" />
        </view>

        <view class="formItem">
          <view class="label">证件类型</view>
          <picker mode="selector" class="content" :range="selector.type" range-key="label" @cancel="cancel('type')"
            @change="change($event, 'type')">
            <!-- <input type="text" disabled :value="showForm.type" :placeholder="'请选择证件类型'" /> -->
            <view :style="{ color: showForm.type ? '#333' : '#999' }">{{
              showForm.type || '请选择证件类型' }}</view>
          </picker>
        </view>

        <view class="formItem">
          <view class="label">证件号码</view>
          <input class="content" :disabled="btn_type == 'edit'" placeholder="请输入证件号码" v-model="form.idCard" />
        </view>

        <view class="formItem">
          <view class="label">手机号码</view>
          <input class="content" v-model="form.phone" placeholder="请输入手机号码" />
        </view>

        <!-- 注册消防工程师 -->
        <view class="formItem">
          <view class="label">注册消防工程师</view>
          <picker mode="selector" class="content" :range="selector.registeredFireEngineer" range-key="label"
            @cancel="cancel('registeredFireEngineer')" @change="change($event, 'registeredFireEngineer')">
            <view :style="{ color: showForm.registeredFireEngineer ? '#333' : '#999' }">{{
              showForm.registeredFireEngineer || '请选择注册消防工程师' }}</view>
          </picker>
        </view>

        <!-- 消防设施操作人员 -->
        <view class="formItem">
          <view class="label">消防设施操作人员</view>
          <picker mode="selector" class="content" :range="selector.facilityOperators" range-key="label"
            @cancel="cancel('facilityOperators')" @change="change($event, 'facilityOperators')">
            <view :style="{ color: showForm.facilityOperators ? '#333' : '#999' }">{{
              showForm.facilityOperators || '请选择消防设施操作人员' }}</view>
          </picker>
        </view>

        <!--是否技术负责人-->
        <view class="formItem" v-if="show">
          <view class="label">是否技术负责人</view>
          <picker mode="selector" class="content" :range="selector.isResponsible" range-key="label"
            @cancel="cancel('isResponsible')" @change="change($event, 'isResponsible')">
            <view :style="{ color: showForm.isResponsible ? '#333' : '#999' }">{{
              showForm.isResponsible || '请选择是否技术负责人' }}</view>
          </picker>
        </view>
        <!--注册消防工程师资格证书管理号-->
        <view class="formItem" v-if="show1">
          <view class="label">注册消防工程师注册号</view>
          <input class="content" placeholder="请输入注册消防工程师注册号" v-model="form.manageNo" />
        </view>
        <!--注册消防工程师注册证书签发单位-->
        <view class="formItem" v-if="show1">
          <view class="label">注册消防工程师注册证书签发单位</view>
          <input class="content" placeholder="请输入工程师资格证书签发单位" v-model="form.signArea" />
        </view>

        <!-- 人像采集 -->
        <view class="formItem_double" v-if="form.name">
          <view class="label">人像采集</view>
          <view class="content_image">
            <image mode='widthFix' v-if="form.portraitCollection" class="images" :src="getUrl(form.portraitCollection)"
              @tap="ViewImage(form.portraitCollection)" />
            <button class="buttons" type="text" size="mini" v-if="!form.portraitCollection"
              @click="toPhotoCatch('head', 'portraitCollection')">前往人像采集</button>
            <button class="buttons" type="text" size="mini" v-else-if="form.portraitCollection"
              @click="toPhotoCatch('head', 'portraitCollection')">重新采集人像</button>
          </view>
        </view>

        <!-- 身份证人面像 -->
        <view class="formItem_double" v-if="form.name">
          <view class="label required">身份证人像面
          </view>
          <view class="content_image">
            <image mode='widthFix' :class="form.positivePhoto ? 'images' : 'hasnotPhoto'"
              :src="form.positivePhoto ? baseApiUrl + form.positivePhoto : baseImgUrl + '/camera/outline_card.png'"
              @tap="ViewImage(form.positivePhoto)" />
            <button class="buttons" type="text" size="mini" v-if="!form.positivePhoto"
              @click="toPhotoCatch('portrait', 'positivePhoto')">前往采集人像</button>
            <button class="buttons" type="text" size="mini" v-show="form.positivePhoto"
              style="background-color: #ff0000;" @click.stop="DelImg($event, 'positivePhoto')">删除当前人像</button>
          </view>
        </view>

        <!-- 身份证人面像 -->
        <view class="formItem_double" v-if="form.name">
          <view class="label required">身份证国徽面
          </view>
          <view class="content_image">
            <image mode="widthFix" :class="form.backPhoto ? 'images' : 'hasnotPhoto'" @tap="ViewImage(form.backPhoto)"
              :src="form.backPhoto ? baseApiUrl + form.backPhoto : baseImgUrl + '/camera/outline_card.png'" />
            <button class="buttons" type="text" size="mini" v-if="!form.backPhoto"
              @click="toPhotoCatch('emblem', 'backPhoto')">前往采集人像</button>
            <button class="buttons" type="text" size="mini" v-show="form.backPhoto" style="background-color: #ff0000;"
              @click.stop="DelImg($event, 'backPhoto')">删除当前人像</button>
          </view>
        </view>

        <!--是否获取消防设施操作员国家职业资格证书-->
        <view class="formItem" v-if="show2">
          <view class="label">是否获取消防设施操作员国家职业资格证书</view>
          <picker mode="selector" class="content" :range="selector.qualificationCertificate" range-key="label"
            @cancel="cancel('qualificationCertificate')" @change="change($event, 'qualificationCertificate')">
            <view :style="{ color: showForm.qualificationCertificate ? '#333333' : '#999999' }">{{
              showForm.qualificationCertificate || '--请选择--' }}</view>
          </picker>
        </view>

        <!--消防设施操作员国家职业资格证书号-->
        <view class="formItem" v-if="show4">
          <view class="label">消防设施操作员国家职业资格证书号</view>
          <input class="content" placeholder="资格证书号" v-model="form.facilityOperatorsNo" />
        </view>

        <!--消防设施操作员国家职业资格证书理论得分-->
        <view class="formItem" v-if="show3">
          <view class="label">消防设施操作员国家职业资格证书理论得分</view>
          <input class="content" placeholder="理论得分" v-model="form.theoreticalScore" />
        </view>

        <!--消防设施操作员国家职业资格证书操作得分-->
        <view class="formItem" v-if="show3">
          <view class="label">消防设施操作员国家职业资格证书操作得分</view>
          <input class="content" placeholder="操作得分" v-model="form.score" />
        </view>

        <!--注册消防工程师注册证书-->
        <view class="formItem_double" v-if="show1">
          <view class="label">注册消防工程师注册证书
          </view>
          <upload-img :imgList="form.firecontrolQualificationCertificate" :isUpload="true"
            ref="firecontrolQualificationCertificate" :imgcount="5"
            @changeImage="uploadSuccess($event, 'firecontrolQualificationCertificate')"></upload-img>
        </view>

        <!--消防设施操作员国家职业资格证书-->
        <view class="formItem_double" v-if="show5">
          <view class="label">消防设施操作员国家职业资格证书
          </view>
          <upload-img :imgList="form.countryCertificate" :isUpload="true" :imgcount="5" ref="countryCertificate"
            @changeImage="uploadSuccess($event, 'countryCertificate')"></upload-img>
        </view>
      </uni-section>
      <view class="resetBtn" v-if="btn_type == 'edit'">
        <button type="default" :disabled="disableds3" @click="resetPassword">重置密码</button>
      </view>
      <view style="height:100rpx"></view>
    </view>
    <view class="allBtn" v-if="btn_type == 'edit'">
      <view class="btn resign" v-if="form.state !== '2'">
        <button type="warn" :disabled="disableds2" @click="quit">离职</button>
      </view>
      <view class="btn">
        <button type="primary" :disabled="disableds" @click="submit">保存</button>
      </view>
    </view>
    <view class="allBtn" v-else>
      <view class="btn addBtn" @click="addBtn">
        <view>添加</view>
      </view>
    </view>
  </view>

</template>
<script>
import { baseApiUrl, baseImgUrl } from '@/config.js';
import uploadImg from '@/components/upload/upload-img.vue';
import { mapState } from 'vuex';
export default {
  components: { uploadImg },
  computed: {
    ...mapState(['login'])
  },
  data() {
    return {
      disableds: false, // 保存的防抖
      disableds2: false, // 离职的防抖
      disableds3: false, // 重置的防抖
      baseImgUrl: baseImgUrl,
      baseApiUrl: baseApiUrl,
      show: false, // 显示是否为技术负责人
      show1: false, // 是否显示为注册消防工程师对应字段
      show2: false, // 是否显示为消防设施操作人员对应字段
      show3: false, // 是否显示消防设施操作人员证件号
      show4: false, // 是否显示消防设施操作人员考试成绩
      show5: false, // 是否显示消防设施操作人员证件
      navOptions: { // 导航栏配置参数
        statusBar: 'dark',
        left: {
          icon: 'back'
        },
        center: {
          title: '人员基本信息'
        }
      },
      form: {
        name: null,
        type: null,
        idCard: null,
        phone: null,
        portraitCollection: null,
        positivePhoto: null,
        backPhoto: null,
        registeredFireEngineer: null,
        facilityOperators: null,
        isResponsible: '',
        // no: null,
        manageNo: null,
        signArea: null,
        qualificationCertificate: null,
        firecontrolQualificationCertificate: null,
        countryCertificate: null
      },
      showForm: {
        type: "", // 证件照
        registeredFireEngineer: '',// 注册消防师
        facilityOperators: '', // 消防设施操作人员
        isResponsible: '', // 是否是技术负责人
        signArea: '', // 签发地
        qualificationCertificate: '', // 是否获取消防设施操作员国家职业资格证书
      },
      selector: {
        // 证件类型
        type: [
          {
            label: '居民身份证',
            value: '1'
          },
          {
            label: '外国护照',
            value: '2'
          },
          {
            label: '港澳居民居住证',
            value: '3'
          },
          {
            label: '台湾居民居住证',
            value: '4'
          }
        ],
        facilityOperators: [
          {
            label: '消防设施操作人员初级',
            value: '1'
          },
          {
            label: '消防设施操作人员中级',
            value: '2'
          },
          {
            label: '消防设施操作人员高级',
            value: '3'
          }
        ],
        registeredFireEngineer: [
          {
            label: '一级注册消防工程师',
            value: '1'
          },
          {
            label: '二级注册消防工程师',
            value: '2'
          }
        ],
        isResponsible: [
          {
            label: '是',
            value: '是'
          },
          {
            label: '否',
            value: '否'
          }
        ],
        signArea: [
          {
            label: '江西省',
            value: '江西省'
          }
        ],
        qualificationCertificate: [
          {
            label: '已获得',
            value: '1'
          },
          {
            label: '考试已通过，暂未获取职业资格证书',
            value: '2'
          }
        ]
      },
      btn_type: null,
      loading: false,
    }
  },
  onLoad(options) {
    this.btn_type = options.type
    if (options.id) {
      this.form.staffId = options.id
      this.getForm()
    }
  },
  onShow() {
    // if (this.$store.state.unitTask.portraitCollection) {
    //   this.form.portraitCollection = this.$store.state.unitTask.portraitCollection
    // }
  },
  methods: {
    // 对预览图片路径进行处理
    getImgUrl(url) {
      if (url) {
        if (url.indexOf('http') < 0) {
          url = this.$baseApiUrl + url;
        }
        url = url.replace(/\\/g, '/');
        return encodeURI(url);
      } else {
        return url;
      }
    },
    // 预览图片
    ViewImage(url) {
      if (url) {
        var path = url.split(',');
        path = path.map(item => {
          return this.getImgUrl(item);
        });
        uni.previewImage({
          urls: path,
          current: 0
        });
      }

    },
    //! 跳往拍照页面
    toPhotoCatch(type, label) {
      // 防止重复点击
      if (!this.flag) {
        this.flag = true;
        uni.navigateTo({
          url: '/pages/login/components/photoCatch?photoType=' + type + '&label=' + label,
          success: () => {
            this.flag = false;
          }
        })
      } else {
        this.$showToast({
          show: true,
          text: '正在前往拍照页面，请稍后'
        });
      }
    },
    // 删除图片
    DelImg(e, label) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '去掉',
        success: res => {
          if (res.confirm) {
            this.form[label] = ''
          }
        }
      });
    },
    // 获取url
    getUrl(url) {
      if (url) {
        return baseApiUrl + url
      }
    },
    // 上传成功回调函数
    uploadSuccess(e, label) {
      this.form[label] = e.join(',')
    },
    // 获取表单
    getForm() {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      this.$store.dispatch('peopleManage_form', this.form.staffId).then(res => {
        if (res && res.code === 200) {
          this.form = res.data
          // 处理证件类型下拉框数据
          if (this.form.type) {
            this.selector.type.forEach(element => {
              if (element.value === this.form.type) {
                this.showForm.type = element.label
              }
            });
          }
          // 处理注册消防工程师下拉框数据
          if (this.form.registeredFireEngineer) {
            this.selector.registeredFireEngineer.forEach(element => {
              if (element.value === this.form.registeredFireEngineer) {
                this.showForm.registeredFireEngineer = element.label
              }
            });
          }
          this.form.isResponsible = res.data.isResponsible
          this.showForm.isResponsible = res.data.isResponsible
          // 处理注册消防工程师下拉框数据
          if (this.form.facilityOperators) {
            this.selector.facilityOperators.forEach(element => {
              if (element.value === this.form.facilityOperators) {
                this.showForm.facilityOperators = element.label
              }
            });
          }
          // 处理是否获取证书下拉框数据
          if (this.form.countryCertificate) {
            this.showForm.qualificationCertificate = "已获得"
          } else {
            this.showForm.qualificationCertificate = "考试已通过，暂未获取职业资格证书"
          }
          // 处理证书数据
          if (this.form.firecontrolQualificationCertificate) {
            this.form.firecontrolQualificationCertificate = res.data.firecontrolQualificationCertificate.split(",")
          }
          if (this.form.countryCertificate) {
            this.form.countryCertificate = res.data.countryCertificate.split(",")
          }
        }
      }).finally(() => {
        let timer = setTimeout(() => {
          this.loading = false
          uni.hideLoading();
          clearTimeout(timer)
        }, 3000);
      })
    },
    // 确定
    change(e, label) {
      this.form[label] = this.selector[label][e.detail.value].value
      this.showForm[label] = this.selector[label][e.detail.value].label
    },
    // 取消
    cancel(label) {
      this.form[label] = ''
      this.showForm[label] = ''
    },
    // 保存
    submit() {
      let that = this
      this.disableds = true
      let startface = this.startface()
      if (startface) {
        uni.showModal({
          title: '提示',
          content: '确定是否保存吗？',
          showCancel: true,
          success(res) {
            if (res.confirm) {
              if (this.loading) return

              this.loading = true
              uni.showLoading({
                title: '正在加载请稍后',
                mask: true
              });
              // 判断证书数据是否为数组
              if (that.form.firecontrolQualificationCertificate instanceof Array) {
                that.form.firecontrolQualificationCertificate = that.form.firecontrolQualificationCertificate.join(",")
              }
              if (that.form.countryCertificate instanceof Array) {
                that.form.countryCertificate = that.form.countryCertificate.join(",")
              }
              if (that.form.registeredFireEngineer == '2' || that.form.registeredFireEngineer == '' || that.form.registeredFireEngineer == null) {
                that.form.isResponsible = '否'
              }
              that.$store.dispatch('peopleManage_update', that.form)
                .then(res => {
                  if (res.code == 200) {
                    uni.showModal({
                      title: '提示',
                      content: '人员保存成功，请到【工作台】-【机构信息变更】中提交审核，谢谢',
                      success: function (res) {
                        setTimeout(() => {
                          that.$store.commit('saveAuditState', 3)
                          that.disableds = false
                          uni.navigateBack()
                        }, 1000)
                      }
                    });

                  } else {
                    uni.showToast({
                      title: res.msg,
                      icon: 'none',
                      duration: 2000
                    })
                    setTimeout(() => {
                      that.disableds = false
                    }, 1000)
                  }
                }).finally(() => {
                  let timer = setTimeout(() => {
                    this.loading = false
                    uni.hideLoading();
                    clearTimeout(timer)
                  }, 3000);
                })
            } else {
              that.disableds = false
            }
          }
        });
      } else {
        that.disableds = false
      }
    },
    // 离职
    quit() {
      let that = this
      this.disableds2 = true
      uni.showModal({
        title: '提示',
        content: '确定是否要将该人员离职吗？',
        showCancel: true,
        success(res) {
          if (res.confirm) {
            that.form.state = "2"
            // 判断证书数据是否为数组
            if (that.form.firecontrolQualificationCertificate instanceof Array) {
              that.form.firecontrolQualificationCertificate = that.form.firecontrolQualificationCertificate.join(",")
            }
            if (that.form.countryCertificate instanceof Array) {
              that.form.countryCertificate = that.form.countryCertificate.join(",")
            }
            that.$store.dispatch('peopleManage_quit', that.form).then(res => {
              if (res.code == 200) {
                that.$showToast({
                  show: true,
                  text: '操作成功'
                })
                setTimeout(() => {
                  uni.showModal({
                    title: '提示',
                    content: '当前机构处于【未提交状态】，为了不影响执业，请尽快到【机构信息变更】页面的最底部进行提交操作',
                    success: function (res) {
                      that.disableds2 = false
                      that.$store.commit('saveAuditState', 3)
                      uni.navigateBack()
                    }
                  });
                }, 1000)
              } else {
                that.$showToast({
                  show: true,
                  text: '操作失败'
                })
                setTimeout(() => {
                  that.disableds2 = false
                }, 1000)
              }
            })
          } else {
            that.disableds2 = false
          }
        }
      });

    },
    // 重置密码
    resetPassword() {
      let that = this
      this.disableds3 = true
      const userId = {
        userId: this.form.userId
      }
      uni.showModal({
        title: '提示',
        content: '确定是否要将该人员的密码重置吗？',
        showCancel: true,
        success(res) {
          if (res.confirm) {
            that.$store.dispatch('peopleManage_resetPassword', userId).then(res => {
              if (res.code == 200) {
                that.$showToast({
                  show: true,
                  text: '操作成功'
                })
                setTimeout(() => {
                  that.disableds3 = false
                  uni.navigateBack()
                }, 1000)
              } else {
                that.$showToast({
                  show: true,
                  text: '操作失败'
                })
                setTimeout(() => {
                  that.disableds3 = false
                }, 1000)
              }
            })
          } else {
            that.disableds3 = false
          }
        }
      });
    },
    nevTo(fileUrls) {
      uni.navigateTo({
        url: '../../pages_workTableChild/peopleManage/recognition?photoType=true&label=' + fileUrls
      })
    },
    startface() {
      let resoluct = true
      // 基础信息
      let basics = ["name", "type", "idCard", "phone", "portraitCollection", "positivePhoto", "backPhoto"]
      let basicsName = ["姓名", "证件类型", "证件号码", "手机号码", "人像采集", "身份证人像面", "身份证国徽面"]
      try {
        basics.forEach((item, index) => {
          if (this.form[item] == null) {
            throw `请补充${basicsName[index]}信息`
          }
        })
      } catch (e) {
        uni.showToast({
          title: e,
          icon: 'none',
          duration: 2000
        })
        resoluct = false
        return
      }
      // 特殊校验;
      if (!this.form.registeredFireEngineer && !this.form.facilityOperators) {
        uni.showToast({
          title: '请将信息补充完整',
          icon: 'none',
          duration: 2000
        })
        resoluct = false
        return
      }

      if (this.form.registeredFireEngineer == '1') {
        if (this.form.isResponsible == '' || !this.form.manageNo || !this.form.signArea || !this.form.firecontrolQualificationCertificate) {
          uni.showToast({
            title: '请将信息补充完整',
            icon: 'none',
            duration: 2000
          })
          resoluct = false
          return
        }
      } else if (this.form.registeredFireEngineer == '2') {
        if (!this.form.manageNo || !this.form.signArea || !this.form.firecontrolQualificationCertificate) {
          uni.showToast({
            title: '请将信息补充完整',
            icon: 'none',
            duration: 2000
          })
          resoluct = false
          return
        }
      }
      if (this.form.facilityOperators) {
        if (this.form.qualificationCertificate == '1') {
          if (!this.form.facilityOperatorsNo || !this.form.countryCertificate) {
            uni.showToast({
              title: '请将信息补充完整',
              icon: 'none',
              duration: 2000
            })
            resoluct = false
            return
          }
        } else if (this.form.qualificationCertificate == '2') {
          if (!this.form.theoreticalScore || !this.form.score) {
            uni.showToast({
              title: '请将信息补充完整',
              icon: 'none',
              duration: 2000
            })
            resoluct = false
            return
          }
        } else {
          uni.showToast({
            title: '请将信息补充完整',
            icon: 'none',
            duration: 2000
          })
          resoluct = false
          return
        }
      }
      return resoluct
    },
    // 添加人员操作
    addBtn() {
      if (this.form.registeredFireEngineer == '2') {
        this.form.isResponsible = '否'
      }
      let data = {
        name: this.form.name, // 姓名
        type: this.form.type, // 证件类型
        idCard: this.form.idCard, // 证件号码
        phone: this.form.phone, // 联系电话
        registeredFireEngineer: this.form.registeredFireEngineer || null, // 注册消防工程师
        manageNo: this.form.manageNo || null, // 注册消防工程师资质证书管理号
        isResponsible: this.form.isResponsible || '否', // 是否技术负责人
        signArea: this.form.signArea || null, // 注册消防工程师注册证书签发单位
        facilityOperators: this.form.facilityOperators || null, // 设施操作人员
        qualificationCertificate: this.form.qualificationCertificate || null, // 操作员职业资格证书
        facilityOperatorsNo: this.form.facilityOperatorsNo || null, //  消防设施操作员国家职业资格证书号
        theoreticalScore: this.form.theoreticalScore || null, // 消防设施操作员国家职业资格证书理论得分
        score: this.form.score || null, // 消防设施操作员国家职业资格证书操作得分
        portraitCollection: this.form.portraitCollection || null, // 人像采集
        positivePhoto: this.form.positivePhoto || null, // 身份证照片正面
        backPhoto: this.form.backPhoto || null, // 身份证照片反面
        firecontrolQualificationCertificate: this.form.firecontrolQualificationCertificate || null, // 注册消防工程师注册证书
        countryCertificate: this.form.countryCertificate || null, // 消防设施操作员国家职业资格证书
        state: 1,
      }

      const reg =
        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
      if (!reg.test(this.form.idCard)) {
        uni.showToast({
          title: '请输入正确的证件号码!',
          icon: 'none',
          duration: 2000
        })
        return
      }
      let startface = this.startface()
      if (startface) {
        this.$store.dispatch('addInfoList', data).then(res => {
          if (res.code == 200) {
            // uni.showToast({
            //   title: res.msg,
            //   icon: 'none',
            //   duration: 2000
            // })
            uni.showModal({
              title: '提示',
              content: '当前机构处于【未提交状态】，为了不影响执业，请尽快到【机构信息变更】页面的最底部进行提交操作',
              success: function (res) {
                uni.reLaunch({
                  url: '/pages_workTableChild/peopleManage/list'
                })
              }
            });
          } else {
            uni.showModal({
              icon: 'none',
              title: '提示',
              showCancel: false,
              content: res.msg,
              success: function (res) { }
            });
          }
        })
      }
    }
  },
  destroyed() {
    this.$store.state.unitTask.portraitCollection = null
    this.$store.state.login.form.positivePhoto = null
    this.$store.state.login.form.backPhoto = null
  },
  watch: {
    'login.form': {
      handler(val) {
        for (let key in val) {
          console.log(key, val[key])
          if (val[key] != '' && val[key] != null) {
            this.$set(this.form, key, val[key])
          }
        }
      },
      deep: true,
      immediate: true
    },
    // 监听注册消防师
    'form.registeredFireEngineer': {
      handler(val) {
        // 字段联动
        if (val === '1') {
          this.show = true;
          this.show1 = true;
        } else if (val === '2') {
          this.show = false;
          this.show1 = true;
        } else {
          this.show = false;
          this.show1 = false;
        }
        // this.form.isResponsible = ''; // 清空是否技术负责人
        // this.form.manageNo = null; // 清空注册消防工程师注册号
        // this.form.signArea = null; // 注册消防工程师注册证书签发单位
        // // this.showForm.qualificationCertificate = null; // 清空是否获取消防设施操作员国家职业资格证书
        // if (this.$refs.firecontrolQualificationCertificate) {
        //   this.$set(this.$refs.firecontrolQualificationCertificate, 'imgFile', [])
        // }
        // this.show3 = false;
        // this.show4 = false;
        // this.show5 = false;
      },
      deep: true,
      immediate: true
    },
    // 监听消防设施操作人员
    'form.facilityOperators': {
      // 监听options，为标签初始化
      handler(val) {
        // 字段联动
        if (val && val !== '') {
          this.show2 = true;
          this.show5 = true;
        } else {
          this.show2 = false;
          this.show5 = false;
        }
        // this.showForm.qualificationCertificate = null; // 清空是否获取消防设施操作员国家职业资格证书
        // this.form.countryCertificate = null; // 清除消防设施操作员国家职业资格证书
        // if (this.$refs.countryCertificate) {
        //   this.$set(this.$refs.countryCertificate, 'imgFile', [])
        // }
        // this.show3 = false;
        // this.show4 = false;
        // this.show5 = false;
      },
      deep: true,
      immediate: true
    },
    // 是否获取消防设施操作员国家职业资格证书
    'form.qualificationCertificate': {
      // 监听options，为标签初始化
      handler(val) {
        // 字段联动
        if (val === '1') {
          this.show3 = false;
          this.show4 = true;
          this.show5 = true;
        } else if (val === '2') {
          this.show3 = true;
          this.show4 = false;
          this.show5 = false;
        } else {
          this.show3 = false;
          this.show4 = false;
          this.show5 = false;
        }
        // this.form.facilityOperatorsNo = null; // 清空消防设施操作员国家职业资格证书号
        // this.form.theoreticalScore = null; // 清空消防设施操作员国家职业资格证书理论得分
        // this.form.score = null; // 清空消防设施操作员国家职业资格证书操作得分
        // this.form.countryCertificate = null; // 清除消防设施操作员国家职业资格证书
        // if (this.$refs.countryCertificate) {
        //   this.$set(this.$refs.countryCertificate, 'imgFile', [])
        // }
      },
      deep: true,
      immediate: true
    },

  }
}
</script>
<style lang="scss">
@import "@/styles/variables.scss";

.peopleInfo {
  width: 100%;
  height: 100%;
}

.main {
  min-height: calc(100vh - 80rpx);
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
}

.title {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 36rpx;
}

.formItem {
  display: flex;
  align-items: center;
  min-height: 110rpx;
  padding: 24rpx;
  width: calc(100% - 40rpx);
  margin: 0 auto 20rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 35%;
  }

  .content {
    flex: 1;
    text-align: right;
    font-size: 28rpx;
  }
}

.formItem_double {
  display: flex;
  flex-direction: column;
  min-height: 110rpx;
  background: white;
  width: calc(100% - 40rpx);
  margin: 0 auto 14rpx;
  padding: 24rpx;
  border-radius: 20rpx;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 35%;
  }

  .required {
    &::before {
      content: "*";
      margin: 0 10rpx;
      color: #ea0707;
    }
  }

  .content {
    flex: 1;
    text-align: right;
    font-size: 28rpx;
  }

  .content_image {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
  }
}

.images {
  width: 150rpx;
  height: 250rpx;
  border: 1rpx solid #e5e5e5;
  margin-top: 20rpx
}

.buttons {
  background-color: $OVERALL_SITUATION_BACKGROUND;
  font-size: 24rpx;
  color: #FFFFFF;
  margin-top: 20rpx;
  margin-right: 0;
  height: 50rpx;
  line-height: 50rpx;
}

.allBtn {
  padding: 20rpx, auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #e5e5e5;

  .btn {
    color: #fff;
    border-radius: 20rpx;
    text-align: center;
    flex: 1;
    margin: 0 20rpx;
    height: 70rpx;

    uni-button {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      font-size: 28rpx;
    }
  }

  .addBtn {
    background: $OVERALL_CONFIRM_BUTTON_COLOR;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .resign {
    width: 100%;
    line-height: 80rpx;
    width: calc(100% - 40rpx);

    uni-button {
      background: linear-gradient(90deg, #fc685e 0%, #ff4539 100%);
      font-size: 28rpx;
    }
  }
}

.resetBtn {
  width: calc(100% - 40rpx);
  margin: 0 auto;

  uni-button {
    background: linear-gradient(90deg, #e8e8e8 0%, #d4d4d4 100%);
    font-size: 28rpx;
  }
}

::v-deep .btn {
  margin: 0 24rpx;
  left: 0;


}

.btn1 {
  margin: 25rpx 24rpx 0;
  left: 0;

  uni-button {
    background: linear-gradient(90deg, #fc685e 0%, #ff4539 100%);
    font-size: 28rpx;
  }
}

.btn2 {
  margin: 25rpx 24rpx 0;
  left: 0;


}

.portrait {
  display: flex;
  flex-direction: column;

  button {
    margin-left: 0 !important;
    margin-top: 10rpx !important;
  }
}

.hasnotPhoto {
  width: 240rpx;
  margin-top: 20rpx;
}

::v-deep .uni-section {
  margin-top: 0;
  background-color: transparent;
}

::v-deep .uploadImg {
  padding: 0;
  margin-top: 20rpx;

  .cu-form-group {
    padding: 0
  }
}
</style>